html, body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #2b3a42;
 
  display: flex;
  justify-content: center;
  align-items: center;
 }
 
 ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 
 .webpack-logo{
   width: 100%;
   height: 200px;
   /* border: 1px solid red; */
 
   position: relative;
 }
 
 .cube-inner{
   position: absolute;
   left: 50%;
   top: 50%;
   /* 关键,不要用 transform */
   margin: -25px 0px 0px -25px;
   width: 50px;
   height: 50px;
   /* background-color: red; */
 
   /* 启用3D空间 */
   transform-style: preserve-3d;
   transform: rotateX(-33.5deg) rotateY(45deg);
   /* 帧动画 */
   animation: innerLoop 6s ease-in-out infinite;
 }
 
 @keyframes innerLoop{
   0%{
     transform: rotateX(-33.5deg) rotateY(45deg);
   }
 
   50%, 100%{
     transform: rotateX(-33.5deg) rotateY(-315deg);
   }
 }
 
 
 .cube-inner li{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #175d96;
   border: 1px solid white;
 }
 
 .cube-inner .top{
  transform: rotateX(90deg) translateZ(25px);
 }
 
 .cube-inner .bottom{
   transform: rotateX(-90deg) translateZ(25px);
  }
 
  .cube-inner .front{
   transform: rotateX(0deg) translateZ(25px);
  }
 
  .cube-inner .back{
   transform: rotateX(-180deg) translateZ(25px);
  }
  .cube-inner .left{
   transform: rotateY(-90deg) translateZ(25px);
  }
 
  .cube-inner .right{
   transform: rotateY(90deg) translateZ(25px);
  }
 
 
  /* cube outer */
 .cube-outer{
   position: absolute;
   left: 50%;
   top: 50%;
   /* 关键,不要用 transform */
   margin: -50px 0px 0px -50px;
   width: 100px;
   height: 100px;
 
   /* 启用3D空间 */
   transform-style: preserve-3d;
   transform: rotateX(-33.5deg) rotateY(45deg);
    /* 帧动画 */
    animation: outerLoop 6s ease-in-out infinite;
 }
 
 @keyframes outerLoop{
   0%{
     transform: rotateX(-33.5deg) rotateY(45deg);
   }
 
   50%, 100%{
     transform: rotateX(-33.5deg) rotateY(405deg);
   }
 }
 
 
 .cube-outer li{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(141, 214, 249, 0.5);
   border: 1px solid white;
 }
 
 .cube-outer .top{
  transform: rotateX(90deg) translateZ(50px);
 }
 
 .cube-outer .bottom{
   transform: rotateX(-90deg) translateZ(50px);
  }
 
  .cube-outer .front{
   transform: rotateX(0deg) translateZ(50px);
  }
 
  .cube-outer .back{
   transform: rotateX(-180deg) translateZ(50px);
  }
  .cube-outer .left{
   transform: rotateY(-90deg) translateZ(50px);
  }
 
  .cube-outer .right{
   transform: rotateY(90deg) translateZ(50px);
  }